$(function () {
  let state = '已发布'
  $('.btn_cg').on('click', function () {
    state = '草稿'
  })
  $('.btn_pub').on('click', function () {
    state = '已发布'
  })
  layui.form.verify({
    // 正则中的 ' . ' 表示任意字符
    title:[/^.{1,30}$/,'标题必须是1-30位字符']
  })
  //封装获取文章分类数据的函数
  function initCateList() {
    axios.get('/my/cate/list').then(({ data: res }) => {
      if (res.code === 0) {
      //  存储每个动态生成的 option 可选项
       const rows = []
       res.data.forEach((item) => {
         rows.push(`<option value="${item.id}">${item.cate_name}</option>`)
       })
       $('[name="cate_id"]').append(rows)
      //  告诉 layui.Qulii 编辑器 select 不需要美化
       $('.ql-toolbar select').attr('lay-ignore', '')
      //  如果表单中某些元素是动态追加的,则与要调用 form.render() 进行重新渲染,否则追加的内容无法被展示出来
        layui.form.render('select')
      // 当 render 完毕后,把 Quill 中的 select 全部隐藏
       $('.ql-toolbar select').hide()
     }
    })
  }
  initCateList()
// 定义 Quill 的工具栏选项 
  var toolbarOptions = [
    ['bold', 'italic', 'underline', 'strike','image'],        // toggled buttons
    ['blockquote', 'code-block'],
  
    [{ 'header': 1 }, { 'header': 2 }],               // custom button values
    [{ 'list': 'ordered'}, { 'list': 'bullet' }],
    [{ 'script': 'sub'}, { 'script': 'super' }],      // superscript/subscript
    [{ 'indent': '-1'}, { 'indent': '+1' }],          // outdent/indent
    [{ 'direction': 'rtl' }],                         // text direction
  
    [{ 'size': ['small', false, 'large', 'huge'] }],  // custom dropdown
    [{ 'header': [1, 2, 3, 4, 5, 6, false] }],
  
    [{ 'color': [] }, { 'background': [] }],          // dropdown with defaults from theme
    [{ 'font': [] }],
    [{ 'align': [] }],
  
    ['clean']                                         // remove formatting button
  ]
  // 创建富文本编辑器
  var quill = new Quill('#editor', {
    // 配置工具栏
    modules: {
      toolbar: toolbarOptions
    },
    theme: 'snow'
  })

  // 操作获取封面按钮的事件
  // 模拟文件选择框的点击事件
  $('.btn-choose-img').on('click', function () {
    $('#file').click()
  })

  let fill = null
  // 监听文件选择框的 change 事件
  $('#file').on('change', function (e) {
    // 通过 e.target.files 伪数组获取到用户选择的文件列表
    const files = e.target.files
    // 判断用户是否选择的文件,如果没有,则return
    if (files.langth === 0) {
     
      return fill = null
    }
    file = files[0]
    const imgURL = URL.createObjectURL(files[0])
    $('#image').attr('src',imgURL)
  })

// 监听表单的 subimt 事件 并组织默认提交行为
  $('.form-pub').on('submit', function (e) {
    e.preventDefault()
    // 先判断用户是否选择封面
    if (!file) {
      return layer.msg('请选择封面,再发布文章')
    }

    const fd = new FormData()
    fd.append('title',$('[name="title"]').val())
    fd.append('cate_id',$('[name="cate_id"]').val())
    fd.append('cover_img',file)
    fd.append('content',quill.root.innerHTML)
    fd.append('state', state)
    axios.post('/my/article/add', fd).then(({ data: res }) => {
      if (res.code===0) {
        location.href = '/article/act_list.html'
        // 调用index页面的 highlight 函数
        window.parent.higjtlight('文章列表') 
      }
    })
  })

})